<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="form-box" v-loading='loading'>
            <el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="0px" class="form" label-position='left'>
                <div class="form-title">积分抵扣规则设置</div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level"><font color="red">*</font>&nbsp;最高抵扣金额限制</span>
                        <span class="note-level"><font color="red">&nbsp;&nbsp;&nbsp;&nbsp;注：仅抵扣超级会员的费用，并且取下方最先达到的限额。</font></span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="24">
                                <el-form-item label="按会员订单比例：" prop="vipOrdersPro" label-width="140px">
                                    <span>最高抵会员订单金额的&nbsp;&nbsp;&nbsp;&nbsp;</span><el-input v-model="dataForm.vipOrdersPro" :maxlength="2" placeholder="" style="width:12%;"></el-input><span>&nbsp;&nbsp;&nbsp;&nbsp;%</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="24">
                                <el-form-item label="最高可抵金额：" prop="deduction" label-width="140px">
                                    <span>最高抵扣&nbsp;&nbsp;&nbsp;&nbsp;</span><el-input v-model="dataForm.deduction" :maxlength="3" placeholder="" style="width:12%;"></el-input><span>&nbsp;&nbsp;&nbsp;&nbsp;元</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level"><font color="red">*</font>&nbsp;积分与现金比例</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21" class="integral-money">
                            <el-col :span="3">
                                <el-form-item label="" prop="integral" label-width="0">
                                    <el-input v-model="dataForm.integral" :maxlength="4" placeholder="请输入多少积分" style="width:100%;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1" align="center" class="scale-out"><span class="scale">:</span></el-col>
                            <el-col :span="3">
                                <el-form-item label="" label-width="0">
                                    <span>1元</span>
                                    <!-- <el-input v-model="dataForm.money" :disabled="true" :maxlength="5" placeholder="抵扣多少现金" style="width:100%;"></el-input> -->
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level"><font color="red">*</font>&nbsp;适用收费产品</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="22">
                                <el-form-item label="" prop="checkList">
                                    <el-checkbox-group v-model="dataForm.checkList"> 
                                        <el-checkbox v-for="item in dataForm.chargeProducts" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item>
                                <div class="footer">
                                    <el-button type="primary" @click="submitForm('dataForm')">保存</el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    import Levelbar from '../layout/Levelbar';
    import { saveDeductRule, getDeductRule, listProductPackManage } from 'api/integralManage';

    let dataForm = {
        vipOrdersPro: '',
        deduction: '',
        integral: '',
        money: '1',
        checkList: [],
        chargeProducts: []
    };
    export default {
        name: 'integralDeduction',
        components: { Levelbar },
        data() {
            return {
                loading: false,
                dataForm,
                rules: {
                    vipOrdersPro: [
                        { required: true, message: '内容不能为空', trigger: 'blur' },
                        { pattern: /^[1-9]\d*$/, message: '格式不正确', trigger: 'blur' },
                        { validator: (rule, value, callback) => {
                            if (Number(value)<1 || Number(value)>=100) {
                                callback(new Error('请输入1~99的整数'));
                            } else {
                                callback();
                            }
                        }, trigger: 'blur' }
                    ],
                    deduction: [
                        { required: true, message: '内容不能为空', trigger: 'change,blur' },
                        { pattern: /^[1-9]\d*$/, message: '格式不正确', trigger: 'change,blur' },
                        { validator: (rule, value, callback) => {
                            if (Number(value)<1 || Number(value)>100) {
                                callback(new Error('请输入1~100的整数'));
                            } else {
                                callback();
                            }
                        }, trigger: 'change,blur' }
                    ],
                    integral: [
                        { required: true, message: '内容不能为空', trigger: 'change,blur' },
                        { pattern: /^[1-9]\d{2,5}$/, message: '请输入100~9999的整数', trigger: 'change,blur' },
                        { validator: (rule, value, callback) => {
                            if (Number(value)<100 || Number(value)>=10000) {  
                                callback(new Error('请输入100~9999的整数'));
                            } else {
                                callback();
                            }
                        }, trigger: 'change,blur' }
                    ],
                    checkList: [
                        { type: 'array', required: true, message: '请至少选择一个收费产品', trigger: 'change' }
                    ]
                }
            }
        },
        created() {
            this.getChargeProducts();
            this.initPage();
        },
        methods: { 
            getChargeProducts() {
                listProductPackManage().then(res => {
                    this.dataForm.chargeProducts = res.data.content;
                }).catch(() => {
                    console.log('err');
                });
            },
            initPage() {
                getDeductRule().then(res => {
                    let obj = res.data.content;
                    this.dataForm.vipOrdersPro = String(obj[0].deductDividedPercentage);
                    this.dataForm.deduction = String(obj[0].deductMoney);
                    this.dataForm.integral = String(obj[0].point);
                    this.dataForm.money = String(obj[0].pointToMoney);
                    this.dataForm.checkList = [];
                    if (obj.length > 1) {
                        obj.forEach(item => {
                            this.dataForm.checkList.push(item.productId);
                        });
                    } else {
                        this.dataForm.checkList.push(obj[0].productId);
                    }
                    
                }).catch(() => {
                    console.log('err');
                });
            },
            submitForm(dataForm) {

                this.$refs[dataForm].validate((valid) => {
                    if (valid) {
                      
                        this.$confirm('确定要保存积分抵扣的规则，保存后即刻生效请谨慎操作~!', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: ' '
                        }).then(() => {
                            let deductDividedPercentage = this.dataForm.vipOrdersPro; // 会员订单最高抵扣百分比
                            let productIds = Array.from(new Set(this.dataForm.checkList)); // 收费产品id
                            let pointToMoney = 1; // this.dataForm.money; // 积分抵扣现金
                            let point = this.dataForm.integral; // 积分
                            let deductMoney = this.dataForm.deduction; // 最高抵扣金额
                            this.loading = true;
                            saveDeductRule(deductDividedPercentage, productIds, pointToMoney, point, deductMoney).then(response => {
                                this.loading = false;
                                if (response.data.status == 200) {
                                    this.$message.success(response.data.errorMsg);
                                    // this.$refs[dataForm].resetFields();
                                } else {
                                    this.$message.error(response.data.errorMsg);
                                }
                            }).catch(() => {
                                this.loading = false;
                            });
                        }).catch(() => {
                            this.$message({type: 'info', message: '已取消'});          
                        });
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss"  scoped>
    .app-container {
        position: relative;
        padding: 20px 20px 10px;
        font-size: 12px;
        color: #333;
        $bgcolor: #fff;

        @mixin showTitle() {
            background: $bgcolor;
            box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        }
        .form-box {
            padding: 0 50px 20px;
            @include showTitle();
            .form-title {
                padding-top:8px;
                text-align: center;
                font-size: 18px;
                color: #333;
                line-height: 72px;
                font-weight: bold;
                font-family: Microsoft YaHei;
                border-bottom: 1px solid #ddd;
            }
            .note-level {
                font-size: 12px;
            }
            .form {
                .form-item {
                    .form-item-title {
                        margin: 40px 0;
                        font-size: 14px;
                        color: #333;
                        line-height: 14px;
                        border-left: 4px solid #ff5e2c;
                        text-indent: 16px;
                        .note-css {
                            vertical-align: middle;
                            display: inline-block;
                            width: 4px;
                            height: 12px;
                            margin-right: 26px;
                            border-left: 3px solid #ff5e2c;
                        }
                    }
                    .form-content {
                        margin-left: 35px;
                        .tip {
                            font-size: 12px;
                            color: #aaa;
                        }
                        .scale-out {
                            margin-top: 4px;
                            .scale {
                                font-size: 20px;
                                color: #aaa;
                            }
                        }
                        .integral-money {
                            display: flex;
                        }
                    }
                    .footer {
                        text-align: center;
                        margin-top: 30px;
                    }
                    
                }
            }
        }
        
    }
</style>